<template>
	<scroll-view scroll-y class="scroll-review" :class="reviewClass">
		<view style="position: relative;">
			<view v-for="sen in reviewWords" style="margin-bottom: 20rpx;">
				<view @click="playMp3(sen.data.SentenceSnapshot.Audio)">
					<view style="text-align: center;">
						<u-image height="400rpx" mode="aspectFit" class="sentence-img" :src="sen.data.SentenceSnapshot.Media"></u-image>
					</view>
					<view style="margin: 20rpx;">
						<sentence-linght-words style="margin: 20rpx;" :words="sen.items" :sentence="sen.data.SentenceSnapshot" />	
					</view>
					
					<!-- <view style="margin: 20rpx;">{{sen.data.SentenceSnapshot.SentenceEn}}</view> -->
					<view style="margin: 20rpx;text-indent: 2em;">{{sen.data.SentenceSnapshot.SentenceCn}}</view>
				</view>
				<view @click="playMp3(item.MP3)" v-for="item in sen.items" :key="item.WordId"
					style="display: flex; width:100%; font-size: var(--text-18); padding: 15rpx; border-bottom: 0.1rpx solid #777; padding-bottom: 20rpx;">
					<view style="flex: 1;">
						{{mode==0?item.Word:item.Mean}}
					</view>
					<view style="flex: 1;">
						<view v-if="item.show">
							{{mode==0?item.Mean:item.Word}}
						</view>
						<view v-else style="text-align: center; width: 100%;" @click="showitem(item)">
							<u-icon color="#C9CACA" size="40" name="eye-fill"></u-icon>
						</view>
					</view>
					<view style="width: 90rpx;text-align: center;" @click="sureitem(item)">
						<u-icon :color="item.sure?'#009B4C':'#C9CACA'" size="40" name="checkmark"></u-icon>
					</view>
				</view>
			</view> 
		</view>
		<div class="w-full h-20rpx"></div>
	</scroll-view>
	<view class="bottom-btn-box">
		<u-button @click="handelNext" class="next-btn w-full" type="warning" :plain="true">
			<view class="next-text">继续</view>
		</u-button>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, watch, computed, nextTick, inject } from 'vue';
	import { lodash, pivotJson } from '@/utils';
	import { IWord } from '@/store/study';
	import { useSoundEffect } from '@/common/hooks';
	import SentenceLinghtWords from '../sentence-linght-words/sentence-linght-words.vue';
	
	/** 测试结果 */
	defineOptions({
		name: 'word-review',
		inheritAttrs: false,
		options: {
			virtualHost: true
		}
	});

	const props = defineProps(["wordlist", "mode", "image"]);
	const emit = defineEmits(['next']);
	const { playMp3 } = useSoundEffect();
	
	const isteacher = inject('isteacher');
	const isreview = inject('isreview');
	
	const src = ref('');
	
	const reviewClass = computed(() => {
		// 正式课：伴学模式
		if (!isteacher && !isreview) {
			return 'teacher-remeber'
		}
		
		// 保温课：伴学模式
		if (isteacher && isreview) {
			return 'teacher-review'
		}
		
		// 保温课：自主学习
		if (isreview) {
			return 'custom-review'
		}
		return '';
	})
	const viewList = computed(() => {
		return props.wordlist.filter((item: IWord) => item.MP3 && item.NeedRemeber);
	})

	function showitem(item: any) {
		item.show = true;
	}

	function sureitem(item: any) {
		item.sure = true;
		item.show = true;
	}
	
	function handelNext() {
		// console.log('=== comp >>> test-result >>> handelNext')
		emit('next');
	}
	
	const reviewWords = ref([]);

	watch(() => props.wordlist, (_nVal: any) => {
		reviewWords.value = pivotJson(props.wordlist,"SentenceId",["SentenceId","SentenceSnapshot"]);
		if (props.wordlist.length > 0) {
			nextTick().then(() => {
				uni.hideLoading();
			})
		}
	}, {
		immediate: true
	})

	onMounted(() => {
		
	})
</script>

<style lang="scss" scoped>
	.test-detail {
		--font-color: #332c2b;
	}

	/* #ifdef H5 */
	.scroll-review { height: calc(100vh - 120px); }
	.scroll-review.teacher-remeber { height: calc(100vh - 200px); }
	.scroll-review.teacher-review { height: calc(100vh - 200px); }
	.scroll-review.custom-review {}
	/* #endif */
	
	/* #ifdef MP */
	.scroll-review { height: calc(100vh - 144rpx); }
	.scroll-review.teacher-remeber { height: calc(100vh - 450rpx); }
	.scroll-review.teacher-review { height: calc(100vh - 250rpx); }
	/* #endif */
	
	.test-detail {
		flex: 1;

		.score-box {
			background-color: #f8f8fa;
			border-radius: 26rpx;
			height: 280rpx;
			display: flex;

			.lv {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-flow: column;
				align-items: center;

				.letter {
					font-size: 60rpx;
					font-weight: bold;
					color: #f55f22;
				}
			}

			.right-rate {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: column;

				.score-rate {
					display: flex;
					align-items: flex-end;
					font-weight: bold;

					.score {
						font-size: 60rpx;
						color: #f55f22;
					}

					.rate {
						margin-bottom: 10rpx;
						font-size: 30rpx;
						margin-left: 4rpx;
						color: #332c2b;
					}
				}
			}

			.label {
				font-size: 40rpx;
				color: #332c2b;
				margin-bottom: 20rpx;
			}
		}

		.answer-data {
			margin-top: 80rpx;

			.label {
				padding-left: 130rpx;
				color: #332c2b;
				font-size: 40rpx;
			}

			.count-text {
				margin-top: 8rpx;
				padding-left: 130rpx;
				color: #8b8b8c;

				.point {
					display: inline-block;
					margin-right: 20rpx;
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					background-color: #f55f22;
				}
			}

			.count-num {
				color: #f55f22;
				font-weight: bold;
				margin-left: 4rpx;
				margin-right: 4rpx;
			}
		}
	}

	.next-text{
		font-size: 38rpx;
		font-weight: bold;
		display: flex;
	}

	/* 针对 1280px 分辨率 */
	@media(min-width:1200px) {}
</style>